<template>
    <div class="main-container">
        <global />
        <div class="main-content">
            <div class="content-container">
                <div class="service-manage">
                    <div class="header">
                        <!-- 新增搜索和筛选组件 -->
                        <el-input v-model="SSid" placeholder="请输入需要搜索的学生学号"
                            style="width: 200px; margin-right: 10px;"></el-input>
                        <el-button type="primary" @click="page">搜索</el-button>
                    </div>
                    <el-table :data="evaluationRecords" border style="width: 100%">
                        <el-table-column label="学生学号" prop="tsSid"></el-table-column>
                        <el-table-column label="学生姓名" prop="sName"></el-table-column>
                        <el-table-column label="评估类型" prop="tsType">
                            <template #default="scope">
                                <el-tag type="info">{{ scope.row.tsType === 1 ? '学习评估' :
                                    scope.row.tsType === 2 ? '心理评估' : '智能评估' }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="评估得分">
                            <template #default="scope">
                               <span  :style="{ color: scope.row.tsScore < 5 ? 'red' : 'inherit' }">
                                {{ scope.row.tsScore }}
                               </span> 
                            </template>
                        </el-table-column>
                        <el-table-column label="评估等级">
                            <template #default="scope">
                                <el-tag type="info">{{ scope.row.tsLevel === 1 ? '正常' :
                                    scope.row.tsLevel === 2 ? '良好' :
                                        scope.row.tsLevel === 3 ? '关注' : '严重' }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="评估描述" prop="tsContent"></el-table-column>
                        <el-table-column label="评估时间" prop="tsCreatetime"></el-table-column>
                    </el-table>
                    <!-- 分页组件 -->
                    <div class="pagination-container">
                        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                            :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
                            :total="total" class="pagination" @current-change="page" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive, toRefs, onMounted, ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import axios from '@/router/axios'
import { getSessionStorage } from '@/router/common'

export default {
    setup() {
        const state = reactive({
            // 模拟数据 - 评估记录
            evaluationRecords: [],
            currentPage: 1,
            pageSize:5,
            total: 0,
            SSid: ''
        })
        page();
        function page() {
            axios.get('api/teacher/assess/assessPage', {
                params: {
                    page: state.currentPage,
                    pageSize: state.pageSize,
                    SSid: state.SSid
            }
            }).then(res => {
                const result = res.data;
                if(result.code == 1){
                    state.evaluationRecords = result.data.records;
                    state.total = result.data.total;
                    console.log(state.evaluationRecords);
                }else{
                    ElMessage.error(result.msg);
                }
            })
        }

        return {
            ...toRefs(state),
            page,
        }
    }
}
</script>

<style scoped>
.main-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
}

.main-content {
    margin-left: 220px;
    margin-top: 60px;
    width: calc(100% - 220px);
    height: calc(100vh - 60px);
    overflow: auto;
}

.content-container {
    padding: 20px;
    min-height: calc(100% - 40px);
}

.header {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.expand-detail {
    padding: 20px;
}

.evaluation-input {
    margin-top: 20px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 4px;
}

.evaluation-input h3 {
    margin-bottom: 20px;
    color: #409EFF;
}

.chart-container {
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.chart-filters {
    margin-bottom: 20px;
}

.chart {
    height: 400px;
    width: 100%;
}

/* 响应式布局 */
@media (max-width: 768px) {
    .main-content {
        margin-left: 0;
        width: 100%;
    }
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
}

.operation-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.operation-buttons .el-button {
    width: 100%;
    margin-left: 0;
}

:deep(.operation-popover) {
    padding: 12px;
}
</style>